<template>
  <div class="hotel-detail w">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/hotel">酒店</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/hotel', query: { cityName: $store.state.hotel.locationCity } }">{{ hotel.real_city }}酒店</el-breadcrumb-item>
      <el-breadcrumb-item>{{ hotel.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <HotelDetailNameInfo :hotel="hotel" />
    <HotelDetailPicsInfo />
    <HotelDetailProducts :hotelProductsTableData="hotel.products" />
    <HotelDetailAreaInfo :hotelAreaInfo="hotelAreaInfo" @load-map="handleLoadMap" />
    <HotelDetailAssets :hotel="hotel" />
    <HotelDetailComments :hotel="hotel" />
  </div>
</template>

<script>
import HotelDetailNameInfo from '@/components/hotel/_id/HotelDetailNameInfo.vue'
import HotelDetailPicsInfo from '@/components/hotel/_id/HotelDetailPicsInfo.vue'
import HotelDetailProducts from '@/components/hotel/_id/HotelDetailProducts.vue'
import HotelDetailAreaInfo from '@/components/hotel/_id/HotelDetailAreaInfo.vue'
import HotelDetailAssets from '@/components/hotel/_id/HotelDetailAssets.vue'
import HotelDetailComments from '@/components/hotel/_id/HotelDetailComments.vue'

export default {
  name: 'HotelDetail',
  components: {
    HotelDetailNameInfo,
    HotelDetailPicsInfo,
    HotelDetailProducts,
    HotelDetailAreaInfo,
    HotelDetailAssets,
    HotelDetailComments
  },
  data() {
    return {
      hotel: {
        hotellevel: {},
        hoteltype: {},
        location: {}
      },
      hotelAreaInfo: {}
    }
  },
  methods: {
    /** 获取酒店详情 */
    getHotelDetails (params) {
      return this.$axios.get('/hotels', { params }).then(res => [null, res]).catch(err => [err])
    },
    async renderHotelDetails (id) {
      const [err, res] = await this.getHotelDetails({ id })

      if (err) {
        return this.$message.error('获取酒店详情信息失败')
      }

      this.hotel = res.data.data[0]
    },
    /*
    由于地图是在子组件当中，子组件的地图加载完毕之后会立马触发这个函数
    但是可能此时父组件的数据还没有挂载完成，mounted 钩子还没触发，导致这里传入的
    对象是初始值，所以子组件监听不到变化，从而导致地图加载不出标记点，解决办法就是
    在这里需要再发多一次请求，另外拿数据
     */
    async handleLoadMap () {
      const id = this.$route.params.id
      const [err, res] = await this.getHotelDetails({ id })

      if (err) {
        return this.$message.error('加载地图标记失败')
      }

      const { longitude, latitude }  = res.data.data[0].location
      const { name, address } = res.data.data[0]

      this.hotelAreaInfo = {
        longitude,
        latitude,
        name,
        address
      }
    }
  },
  async mounted () {
    const id = this.$route.params.id
    this.renderHotelDetails(id)
  }
}
</script>

<style lang="less" scoped>
.w {
  width: 1000px;
  padding: 20px 0;
  margin: 0 auto;
}
.hotel-detail {
  .el-breadcrumb {
    margin-bottom: 20px;
    overflow: hidden;
  }
  .height-light {
    color: #f90;
  }
}
</style>
